<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>首页 - 驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
    <!-- BootstrapValidator -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
    <style type="text/css">
		.autocut {
			width:300px;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
			-o-text-overflow:ellipsis;
			-icab-text-overflow: ellipsis;
			-khtml-text-overflow: ellipsis;
			-moz-text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
		}
	</style>
</head>

<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<ul class="nav nav-tabs" id="myTab">
				<li class="active"><a data-toggle="tab" href="#manage" onclick="statistics('manage');"
					aria-expanded="false"> 库存明细图表 </a></li>
				<li class=""><a data-toggle="tab" href="#branchs" onclick="statistics('branchs');"
					aria-expanded="true"> 房型明细 </a></li>
			</ul>
			
			<div id="manage" class="tab-pane active in">
				
				<div class="row">
					<div class="col-xs-12">
						<div class="widget-box">
							<div class="widget-header widget-header-small">
								<h5 class="widget-title lighter">筛选条件</h5>
							</div>
							<div class="widget-body" style="background-color: #EFF3F8;">
								<div class="widget-main">
									<form class="form-inline" id="searchForm" method="post" action="#">
										<input type="hidden" id = "groupByName"/>
										<div class="row widget-main">
											<div class="form-group">
												<label >品类筛选</label>
												<select multiple="multiple" class=" chosen-select" tabindex="2"
														name="categoryName" id="category" >
	
												</select>
											</div>
											<div class="form-group">
												<label >渠道筛选</label>
												<select multiple="multiple" class="chosen-select" tabindex="2"
														name="saleChannel" id="channel" >
												</select>
											</div>
	
											<div class="form-group">
												<label >供应商类型筛选</label>
												<select multiple="multiple" class="chosen-select" tabindex="2"
														name="supplierType" id="supplierType">
	
												</select>
											</div>
	
										</div>
										<div class="row widget-main">
											<div class="form-group">
												<label >大区筛选</label>
												<select  class="chosen-select" tabindex="2"
														 name="regionname" id="district" onchange="districtChange('district', 'product')">
													<option value="">请选择大区</option>

												</select>
											</div>
											<div class="form-group">
												<label >产品经理筛选</label>
												<select data-placeholder="" class="chosen-select" tabindex="2"
														name="productmanager" id="product" >
	
												</select>
											</div>
	
											<div class="form-group">
												<label >供应商筛选</label>
												<select multiple="multiple"  class="chosen-select" tabindex="2"
														name="supplierName" id="supplier">
	
												</select>
											</div>
	
										</div>
										<div class="row widget-main">
											<div class="form-group">
												<label >酒店筛选</label>
												<select  multiple="multiple"  class="chosen-select" tabindex="2"
														 name="productName" id="hotel">
												   
												</select>
											</div>
											
											<div class="form-group">
												<label >是否包含共享库存</label>
												<select data-placeholder="" class="chosen-select" tabindex="2"
														name="share" id="share">
													<option value="false">否</option>
													<option value="true">是</option>
												</select>
											</div>
											<div class="form-group">
												<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
													<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
													Search
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-14">
						<div class="widget-box">
							<div class="widget-body">
								<div class="widget-main row">
									<div class="col-xs-10">
										<div class="widget-box">
											<div class="widget-body">
												<h4 style="text-align: center;"></h4>
												<div id="chart1" style="width: 100%; height: 500px; margin: 0 auto;"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-14">
						<div class="widget-box" id="categoryNameDiv" style="overflow: scroll;height: 146px">
							<div class="widget-body">
								<button onclick="exportExcel('groupByCategory')" type="button" class="btn btn-pink btn-sm">
									<span class="ace-icon fa icon-on-right bigger-110"></span>
									导出excel
								</button>
								<table class="hovertable table table-bordered" >
									<tr>
										<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">品类</th>
										<#if currentDays?? && currentDays?size&gt;0>
											<#list currentDays as day>
												<#if day_index = 0><th  style="padding-left: 300px;" >${day!}</th>
												<#else><th >${day!}</th>
											</#if>
										</#list>
									</#if>
									</tr>
									<tbody id ="categoryName">

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-14">
						<div class="widget-box" id="saleChannelDiv" style="overflow: scroll;height: height: 216px">
							<button onclick="exportExcel('groupByChannel')" type="button" class="btn btn-pink btn-sm">
								<span class="ace-icon fa icon-on-right bigger-110"></span>
								导出excel
							</button>
							<div class="widget-body">
								<table class="hovertable table table-bordered" >
									<tr>
										<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">渠道</th>
										<#if currentDays?? && currentDays?size&gt;0>
											<#list currentDays as day>
												<#if day_index = 0><th style="padding-left: 300px;" >${day!}</th>
												<#else><th >${day!}</th>
											</#if>
										</#list>
									</#if>
									</tr>
									<tbody id ="saleChannel">

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-14">
						<div class="widget-box" id= "productNameDiv" style="overflow: scroll;height: 440px">
							<button onclick="exportExcel('groupByHotle')" type="button" class="btn btn-pink btn-sm">
								<span class="ace-icon fa icon-on-right bigger-110"></span>
								导出excel
							</button>
							<div class="widget-body">
								<table class="hovertable table table-bordered" >
									<tr>
										<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">酒店</th>
										<#if currentDays?? && currentDays?size&gt;0>
											<#list currentDays as day>
													<#if day_index = 0><th style="padding-left: 300px;" >${day!}</th>
													<#else><th  >${day!}</th>
												</#if>
											</#list>
										</#if>
									</tr>
									<tbody id ="productName"></tbody>
								</table>
							</div>
						</div>
						<!--分页开始-->
						<div class="ui-jqgrid" id="ui-jqgrid-productName" >
							<div id="grid-pager"
								 class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
								<div id="pg_grid-pager" class="ui-pager-control" role="group">
									<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
										   style="width: 100%; table-layout: fixed; height: 100%;" role="row">
										<tbody>
										<tr>
											<td id="grid-pager_left" align="left"></td>
											<td id="grid-pager_center" align="center"
												style="width: 343px;">
												<table cellspacing="0" cellpadding="0" border="0"
													   style="table-layout: auto;" class="ui-pg-table">
													<tbody>
													<tr>
														<td id="first_grid-pager-productName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="first"
																						   class="product ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
														<td id="prev_grid-pager-productName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="pre"
																						   class="product ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
														<td dir="ltr">Page <input class="ui-pg-input" id="ui-pg-input-productName" type="text"
																				  size="2" role="textbox"> of <span
																id="sp_1_grid-pager"></span></td>
														<td id="next_grid-pager-productName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="next"
																						   class="product ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
														<td id="last_grid-pager-productName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="last"
																						   class="product ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
													</tr>
													</tbody>
												</table>
											</td>
											<td id="grid-pager_right" align="right">
												<div id="pagerView-productName" dir="ltr" style="text-align: right" class="ui-paging-info">
												</div>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<!--分页结束-->
					</div>
				</div>
				<div class="row">
					<div class="col-xs-14">
						<div class="widget-box"  style="height: 246px">

						</div>
					</div>
				</div>
			</div>
			<div id="branchs" class="tab-pane" style="display:none;">
				<div class="row">
					<div class="col-xs-12">
						<div class="widget-box">
							<div class="widget-header widget-header-small">
								<h5 class="widget-title lighter">筛选条件</h5>
							</div>
							<div class="widget-body" style="background-color: #EFF3F8;">
								<div class="widget-main">
									<form class="form-inline" id="searchFormBranch" method="post" action="#">
										<div class="row widget-main">
											<input type="hidden" id = "groupByNameBranch"/>
											<div class="form-group">
												<label >品类筛选</label>
												<select multiple="multiple" class=" chosen-select" tabindex="2"
														name="categoryName" id="category_branch" >

												</select>
											</div>
											<div class="form-group">
												<label >渠道筛选</label>
												<select multiple="multiple" class="chosen-select" tabindex="2"
														name="saleChannel" id="channel_branch" >
												</select>
											</div>
											<div class="form-group">
												<label >酒店筛选</label>
												<select  multiple="multiple"  class="chosen-select" tabindex="2"
														 name="productName" id="branchProduct" >

												</select>
											</div>
											<div class="form-group">
												<label >供应商类型筛选</label>
												<select multiple="multiple" class="chosen-select" tabindex="2"
														name="supplierType" id="branch_supplierType">

												</select>
											</div>
										</div>
										<div class="row widget-main">
											<div class="form-group">
												<label >大区筛选</label>
												<select  class="chosen-select" tabindex="2"
														 name="regionname" id="branch_district" onchange="districtChange('branch_district','branch_product')">

												</select>
											</div>
											<div class="form-group">
												<label >产品经理筛选</label>
												<select data-placeholder="" class="chosen-select" tabindex="2"
														name="productmanager" id="branch_product" >

												</select>
											</div>

											<div class="form-group">
												<label >供应商筛选</label>
												<select multiple="multiple"  class="chosen-select" tabindex="2"
														name="supplierName" id="branch_supplier">

												</select>
											</div>
										</div>
										<div class="row widget-main">

											<div class="form-group">
												<label >是否包含共享库存</label>
												<select data-placeholder="" class="chosen-select" tabindex="2"
														name="share" id="shareBranch">
													<option value="false">否</option>
													<option value="true">是</option>
												</select>
											</div>
											<div class="form-group">
												<button id="search" type="button" onclick="searchBranch(1);" class="btn btn-pink btn-sm">
													<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
													Search
												</button>
												<button onclick="exportExcel('groupByBranch')" type="button" class="btn btn-pink btn-sm">
													<span class="ace-icon fa icon-on-right bigger-110"></span>
													导出excel
												</button>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
				<div class="row">
					<div class="col-xs-14" >
						<div class="widget-box" id= "branchNameDiv" style="overflow: scroll;height: 440px">
							<div class="widget-body">
								<table class="hovertable table table-bordered" >
                               		<tr>
                                   		<th width="300px" style="position: absolute; left: 0px;  background-color: white;">房型</th>
                                        <#if currentDays?? && currentDays?size&gt;0>
                                            <#list currentDays as day>
												<#if day_index = 0><th  style="padding-left: 300px;" >${day!}</th>
												<#else><th  >${day!}</th>
												</#if>

                                            </#list>
									 	</#if>
								   	</tr>
                                    <tbody id = "branchName">
                                	</tbody>
                            	</table>
							</div>
						</div>
						<!--分页开始-->
						<div class="ui-jqgrid" id="ui-jqgrid-branchName" style="display:none">
							<div id="grid-pager"
								 class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
								<div id="pg_grid-pager" class="ui-pager-control" role="group">
									<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
										   style="width: 100%; table-layout: fixed; height: 100%;" role="row">
										<tbody>
											<tr>
												<td id="grid-pager_left" align="left"></td>
												<td id="grid-pager_center" align="center"
													style="white-space: pre; width: 343px;"><table
														cellspacing="0" cellpadding="0" border="0"
														style="table-layout: auto;" class="ui-pg-table">
													<tbody>
													<tr>
														<td id="first_grid-pager-branchName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="first"
																class="branch ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
														<td id="prev_grid-pager-branchName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="pre"
																class="branch ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
														<td dir="ltr">Page <input class="ui-pg-input" id="ui-pg-input-branchName" type="text"
																				  size="2" role="textbox"> of <span
																id="sp_1_grid-pager"></span></td>
														<td id="next_grid-pager-branchName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="next"
																class="branch ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
														<td id="last_grid-pager-branchName" class="ui-pg-button ui-corner-all"
															style="cursor: pointer;"><span attr="last"
																class="branch ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
													</tr>
													</tbody>
												</table></td>
												<td id="grid-pager_right" align="right"><div id="pagerView-branchName" dir="ltr"
																							 style="text-align: right" class="ui-paging-info"></div></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<!--分页结束-->
					</div>
				</div>
			</div>
		
		</div>
	</div>


	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<!-- ace scripts -->
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<!-- validator scripts -->
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<!-- user scripts -->
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<!-- ace settings handler -->
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
	<!--ECharts-->
	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script type="text/javascript">
	 
    	
		 jQuery(function($) {

	        //酒店翻页
	        $('.ui-icon.ace-icon.fa').click(function () {
	            var pager = $(this).attr('attr');
	            if(pager === 'first'){
	            	searchProduct(firstPage_productName);
	            }else if(pager === 'pre'){
	            	searchProduct(prePage_productName)
	            }else if(pager === 'next'){
	            	searchProduct(nextPage_productName)
	            }else if(pager === 'last'){
	            	searchProduct(lastPage_productName);
	            }
	        });
	        //房型翻页
	        $('.branch.ui-icon.ace-icon.fa').click(function () {
	            var pager = $(this).attr('attr');
	            if(pager === 'first'){
	            	searchBranch(firstPage_branchName);
	            }else if(pager === 'pre'){
	            	searchBranch(prePage_branchName)
	            }else if(pager === 'next'){
	            	searchBranch(nextPage_branchName)
	            }else if(pager === 'last'){
	            	searchBranch(lastPage_branchName);
	            }
	        });
		}); 
	    // var seriesData = ${stocks};
	    var firstPage_productName;
    	var prePage_productName;
    	var nextPage_productName;
   		var lastPage_productName;
    
	    var firstPage_branchName;
	    var prePage_branchName;
	    var nextPage_branchName;
	    var lastPage_branchName;
	    
	    var bubbleRateDom1 = document.getElementById("chart1");
	    var eChartsShow = echarts.init(bubbleRateDom1,"light");
	
	    $('.chosen-select').chosen({  allow_single_deselect : true});
	
	    $('.chosen-select').trigger("liszt:updated");

	    var option = {
	        title: {
	            text: "库存量",
                subtext: '数据推送时间为：',
	            x: "center"
	        },
	        tooltip: {
	            trigger: "item",
	            formatter: "{a} <br/>{b} : {c}"
	        },
	        legend: {
	            x: 'left',
	            data: ["库存量"]
	        },
	        dataZoom: [
                 {
                     show: true,
                     realtime: true,
                    
                 },
                 {
                     type: 'inside',
                     realtime: true,
                     
                 }
            ],
	        xAxis: [
	            {
	                type: "category",
	                name: "x",
	                splitLine: {show: false},
	                data: ${days}
	            }
	        ],
	        yAxis: [
	            {
	                type: "value",
	                name: "y"
	            }
	        ],
	        toolbox: {
	            show: false,
	            feature: {
	                mark: {
	                    show: true
	                },
	                dataView: {
	                    show: true,
	                    readOnly: true
	                },
	                restore: {
	                    show: true
	                },
	                saveAsImage: {
	                    show: true
	                }
	            }
	        },
	        calculable: true,
	        series: [
	            {
	                name: "库存量",
	                type: "line",
	                // data:  seriesData
	
	            }
	        ]
	    };
	
	
	
	    if (option && typeof option === "object") {
	        eChartsShow.setOption(option, true);
	    }
	    //d3.select(self.frameElement).style("height", "1500px");
	    //加载供应商类型列表
		supplierTypeLoad();
		loadSupplier();
		loadProduct();
		loadCategory();
		channelLoad();
		districtLoad();
		function supplierTypeLoad(){
             $.ajax({
                 url : '${rc.contextPath}/stock/supplierTypeSearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var supplierList = data
                     html = '';
                     for(var i=0 ; i< supplierList.length; i++){
                         html += '<option value="' + supplierList[i] + '">' + supplierList[i] + '</option>';
                     }

                     $("#supplierType").html(html);
                     $('#supplierType').chosen("destroy").chosen();

                     $("#branch_supplierType").html(html);
                     $('#branch_supplierType').chosen("destroy").chosen();

                 },
                 error:function(data) {
                 }
             });
         }
		function districtLoad(){
             $.ajax({
                 url : '${rc.contextPath}/stock/regionNameSearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var districtList = data
                     var html = '<option value="">请选择大区</option>';
                     for(var i=0 ; i< districtList.length; i++){
                         html += '<option value="' + districtList[i] + '">' + districtList[i] + '</option>';
                     }

                     $("#district").html(html);
                     $('#district').chosen("destroy").chosen();
                     $("#branch_district").html(html);
                     $('#branch_district').chosen("destroy").chosen();


                 },
                 error:function(data) {
                 }
             });
         }
         function channelLoad(){
             $.ajax({
                 url : '${rc.contextPath}/stock/channelSearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var channelList = data
                     html = '';
                     for(var i=0 ; i< channelList.length; i++){
                         html += '<option value="' + channelList[i] + '">' + channelList[i] + '</option>';
                     }

                     $("#channel").html(html);
                     $('#channel').chosen("destroy").chosen();


                     $("#channel_branch").html(html);
                     $('#channel_branch').chosen("destroy").chosen();
                 },
                 error:function(data) {
                 }
             });
         }
         function loadCategory(){
             $.ajax({
                 url : '${rc.contextPath}/stock/categorySearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var categoryList = data
                     html = '';
                     for(var i=0 ; i< categoryList.length; i++){
                         html += '<option value="' + categoryList[i] + '">' + categoryList[i] + '</option>';
                     }

                     $("#category").html(html);
                     $('#category').chosen("destroy").chosen();


                     $("#category_branch").html(html);
                     $('#category_branch').chosen("destroy").chosen();

                 },
                 error:function(data) {
                 }
             });
         }
         /**
          * districtId 大区Dom Id
          * productId 产品Dom Id
          */
         function districtChange(districtId, productId){
             var varDistrictId = "#" + districtId;
             var varProductId = "#" + productId;
             var districtVal = $(varDistrictId).val();
             if (districtVal == ''){
                 $(varProductId).html("");
                 $(varProductId).val("");
                 $(varProductId).chosen("destroy").chosen();
                 return;
             }
             $.ajax({
                 url : '${rc.contextPath}/stock/productManagerSearch',
                 type : "POST",
                 dataType:"json",
                 data : {
                     regionName : districtVal
                 },
                 success:function(data) {
                     var productList = data
                     var html = '<option value="">请选择产品经理</option>';
                     for(var i=0 ; i< productList.length; i++){
                         html += '<option value="' + productList[i] + '">' + productList[i] + '</option>';
                     }

                     $(varProductId).html(html);
                     $(varProductId).chosen("destroy").chosen();

                 },
                 error:function(data) {
                 }
             });
         }

         function loadSupplier(){
             $.ajax({
                 url : '${rc.contextPath}/stock/supplierNameSearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var supplierList = data
                     var html = '';
                     for(var i=0;i<supplierList.length;i++){
                         html += '<option value="'+supplierList[i]+'">'+supplierList[i]+'</option>';
                     }

                     $("#supplier").html(html);
                     $('#supplier').chosen("destroy").chosen();

                     $("#branch_supplier").html(html);
                     $('#branch_supplier').chosen("destroy").chosen();

                 },
                 error:function(data) {
                 }
             });
         }
         function loadProduct(){
             $.ajax({
                 url : '${rc.contextPath}/stock/productSearch',
                 type : "POST",
                 dataType:"json",
                 success:function(data) {
                     var productList = data
                     var html = '<option value="">请选择酒店</option>';
                     for(var i=0;i<productList.length;i++){
                         html += '<option value="'+productList[i]+'">'+productList[i]+'</option>';
                     }

                     $("#hotel").html(html);
                     $('#hotel').chosen("destroy").chosen();

                     $("#branchProduct").html(html);
                     $('#branchProduct').chosen("destroy").chosen();

                 },
                 error:function(data) {
                 }
             });
         }

         /**
          * 获取查询基本信息
          * */
         function getBaseFormData(){
             var categoryName = $("#category").val();
             var saleChannel = $("#channel").val();
             var regionname = $("#district").val();
             var productmanager = $("#product").val();
             var supplierName = $("#supplier").val();
             var productName = $("#hotel").val();
             var branchName = $("#house_type").val();
             var hasShareStock = $("#share").val();
             var supplierType = $("#supplierType").val();
             var formData ={
                 categoryName : categoryName,
                 saleChannel : saleChannel,
                 regionname : regionname,
                 productmanager : productmanager,
                 supplierName : supplierName,
                 productName : productName,
                 branchName : branchName,
                 supplierType : supplierType,
                 hasShareStock : hasShareStock
             }
             return formData;
         }

         function searchClick(){
             var formData = getBaseFormData();
             //加载图表
             loadChart(formData);
             //分类明细
             searchCategory(formData);
             formData.groupByCategory = false;
             //渠道明细
             searchChannel(formData);
             formData.groupByChannel = false;
             //酒店明细
             searchProduct(1);

         }

         function loadChart(formData){
             $.ajax({
                 url : '${rc.contextPath}/stock/detailSearch',
                 type : "POST",
                 dataType:"json",
                 data : JSON.stringify(formData),
                 contentType : "application/json",
                 beforeSend: function(){
                     openPartialLayer($("#chart1"));
                 },
                 complete: function(){
                     removeLoading($("#chart1"));
                 },
                 success:function(data) {
                     if (data && data.code == 1){
                         eChartsShow.setOption({
                             title: {
                                 text: "库存量",
                                 subtext: '数据推送时间为：' + data.message,
                                 x: "center"
                             },
                             series: [{
                                 // 根据名字对应到相应的系列
                                 data: data.dataList
                             }]
                         });
                     }else{
                         bootbox.alert({
                             buttons: {
                                 ok: {
                                     label: '确定'
                                 }
                             },
                             message: data.message,
                             title: "温馨提示",
                         });

                     }
                 },
                 error:function(data) {

                 }
             })
         }
         /**
          查询分类明细
          */
         function searchCategory(formData){
             formData.groupByCategory = true;
             search(formData, "categoryName");
         }

         /**
          查询渠道明细
          */
         function searchChannel(formData){
             formData.groupByChannel = true;
             search(formData, "saleChannel");
         }
	    
	    
	    /**
	    params 需要传的参数
	    objId table id名称
	    */
	   	function search(params, objId){
	   		var layId = "#" + objId + "Div";
	    	openPartialLayer($(layId));
	   		$.ajax({
	            url : '${rc.contextPath}/stock/search',
	            type : "POST",
	            dataType:"json",
	            data : JSON.stringify(params),
	            contentType : "application/json",  
	            success:function(data) {
	            	removeLoading($(layId));
	            	if(data && data.code == 1){
	            		setTableData(data.dataList, objId);
	            	}
	            	
	            },
	            error:function(data) {
	            	
	            }
	        })
	   	}

         /**
          查询酒店明细
          */
         function searchProduct(currentPage){
             var formData = getBaseFormData();
             formData.currentPage = currentPage;
             formData.groupByHotle = true;
             searchPage(formData, "productName");
         }

         /**
          查询房型明细
          */
         function searchBranch(currentPage){
             var categoryName = $("#category_branch").val();
             var saleChannel = $("#channel_branch").val();
             var regionname = $("#branch_district").val();
             var productmanager = $("#branch_product").val();
             var supplierName = $("#branch_supplier").val();
             var productName = $("#branchProduct").val();
             var hasShareStock = $("#shareBranch").val();
             var supplierType = $("#branch_supplierType").val();
             var formData ={
                 currentPage : currentPage,
                 categoryName : categoryName,
                 saleChannel : saleChannel,
                 regionname : regionname,
                 productmanager : productmanager,
                 supplierName : supplierName,
                 productName : productName,
                 supplierType : supplierType,
                 hasShareStock : hasShareStock,
                 groupByBranch : true,
             }
             searchPage(formData, "branchName");
         }
	    /**
	    params 需要传的参数
	    objId table id名称
	    */
	   	function searchPage(params, objId){
	    	var layId = "#" + objId + "Div";
	    	openPartialLayer($(layId));
	   		$.ajax({
	            url : '${rc.contextPath}/stock/searchPage',
	            type : "POST",
	            dataType:"json",
	            data : JSON.stringify(params),
	            contentType : "application/json",
	            success:function(data) {
	            	removeLoading($(layId));
	            	if (data && data.code == 1){
	            		var viewId = "#pagerView-" + objId ;
	            		var pageInfo = data.pageInfo;
		            	$(viewId).text('View ' + pageInfo.startRow + ' - ' + pageInfo.endRow + ' of ' + pageInfo.total);
		            	var pginputId= "#ui-pg-input-"+objId;
		                $(pginputId).val(pageInfo.pageNum);
		            	if(pageInfo && pageInfo.pages>0){
		            		setTableData(pageInfo.list, objId);
		            		var ui_pageId = "#ui-jqgrid-" + objId;
		            		$(ui_pageId).show();
		                    if (objId == "branchName"){
		                    	firstPage_branchName = pageInfo.firstPage;
			                    prePage_branchName = pageInfo.prePage;
			                    nextPage_branchName = pageInfo.nextPage;
			                    lastPage_branchName = pageInfo.lastPage;
		                    } else if(objId == "productName"){
		                    	firstPage_productName = pageInfo.firstPage;
		                    	prePage_productName = pageInfo.prePage;
		                    	nextPage_productName = pageInfo.nextPage;
		                    	lastPage_productName = pageInfo.lastPage;
		                    }
		            	}
	            	}
	            },
	            error:function(data) {
	            	
	            }
	        })
	   	}
	    
        function setTableData(dataList, objId){
        	if (dataList && dataList.length>0){
        		var varHtml='';
        		for (var i=0; i<dataList.length; i++){
                	var objData = dataList[i];
                	varHtml+='<tr>'
                			+'<td width="300px" style="position: absolute; left: 0px;  background-color: white;"><div class="autocut" title="' + objData[objId] + '">' + objData[objId] + '</div></td>'
                			+'<td style="padding-left: 300px;" >'+objData.stock2+'</td>'
                			+'<td>'+objData.stock3+'</td>'
                			+'<td>'+objData.stock4+'</td>'	
                			+'<td>'+objData.stock5+'</td>'	
                			+'<td>'+objData.stock6+'</td>'	
                			+'<td>'+objData.stock7+'</td>'	
                			+'<td>'+objData.stock8+'</td>'	
                			+'<td>'+objData.stock9+'</td>'	
                			+'<td>'+objData.stock10+'</td>'	
                			+'<td>'+objData.stock11+'</td>'	
                			+'<td>'+objData.stock12+'</td>'	
                			+'<td>'+objData.stock13+'</td>'	
                			+'<td>'+objData.stock14+'</td>'	
                			+'<td>'+objData.stock15+'</td>'	
                			+'<td>'+objData.stock16+'</td>'	
                			+'<td>'+objData.stock17+'</td>'	
                			+'<td>'+objData.stock18+'</td>'	
                			+'<td>'+objData.stock19+'</td>'	
                			+'<td>'+objData.stock20+'</td>'	
                			+'<td>'+objData.stock21+'</td>'	
                			+'<td>'+objData.stock22+'</td>'	
                			+'<td>'+objData.stock23+'</td>'	
                			+'<td>'+objData.stock24+'</td>'	
                			+'<td>'+objData.stock25+'</td>'	
                			+'<td>'+objData.stock26+'</td>'	
                			+'<td>'+objData.stock27+'</td>'	
                			+'<td>'+objData.stock28+'</td>'	
                			+'<td>'+objData.stock29+'</td>'	
                			+'<td>'+objData.stock30+'</td>'	
                			+'</tr>';
                }
                var idstr = "#" + objId;
                $(idstr).html(varHtml);
        	}
        }
         /**
          * 导出excel
          * @param groupByName
          */
         function exportExcel(groupByName) {
             var newUrl = '${rc.contextPath}/stock/exportStockDetail';    //设置新提交地址
			 if (groupByName == 'groupByBranch'){
                 $("#searchFormBranch").attr('action',newUrl);    //通过jquery为action属性赋值
                 $("#groupByNameBranch").attr('name',groupByName);
                 $("#groupByNameBranch").val(true);
                 $("#searchFormBranch").submit();    //提交ID为myform的表单
			 }else {
                 $("#searchForm").attr('action',newUrl);    //通过jquery为action属性赋值
                 $("#groupByName").attr('name',groupByName);
                 $("#groupByName").val(true);
                 $("#searchForm").submit();    //提交ID为myform的表单
			 }

         }
	    
	    function statistics(obj){
			
			$(".tab-pane").each(function(){
				var idStr = $(this).attr("id");
				
				if (idStr == obj){
					
					$(this).show();
				}else{
					$(this).hide();
				}
			})
			$('.chosen-select').chosen("destroy").chosen();

		}
	</script>
</body>
</html>